<!DOCTYPE html>
<html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-0 vector-toc-not-available vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-0 skin-theme-clientpref-day vector-sticky-header-enabled" lang="de" dir="ltr"><head>
<meta charset="UTF-8">
<title>Ajax (Programmierung)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./_res_/favicon.png">
<link rel="canonical" href="https://de.wikipedia.org/wiki/Ajax_(Programmierung)"> <link href="./_mw_/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.pygments.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.wikimediamessages.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link href="./_mw_/ext.gadget.citeRef.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.defaultPlainlinks.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonHide.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonLayout.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonStyle.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiDarkmode.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiResponsive.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.specialSearch.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./_mw_/site.styles.css">
<link rel="stylesheet" type="text/css" href="./_mw_/noscript.css">
<link rel="stylesheet" type="text/css" href="./_res_/footer.css">
<link rel="stylesheet" type="text/css" href="./_res_/vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Ajax_Programmierung rootpage-Ajax_Programmierung skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Ajax (Programmierung)</span></h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="contentSub">
<div id="mw-content-subtitle"></div>
</div>
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr">
<p><b>Ajax</b> [<style data-mw-deduplicate="TemplateStyles:r227981795">
/* start https://de.wikipedia.org/ */
.mw-parser-output .IPA a{text-decoration:none}
/* end https://de.wikipedia.org/ */
</style><span class="navigation-not-searchable"><span class="IPA"><a href="Liste_der_IPA-Zeichen" title="Liste der IPA-Zeichen"><span title="Aussprache im Internationalen Phonetischen Alphabet (IPA)" lang="zxx">ˈeidʒæks</span></a></span></span>] (auch <b>AJAX</b>; <a href="Akronym" title="Akronym">Akronym</a> von <a href="Englische_Sprache" title="Englische Sprache">englisch</a> <i><span lang="en"><u>A</u>synchronous <u>J</u>avaScript <u>a</u>nd <u>X</u>ML</span></i>) bezeichnet ein Konzept der <a href="Synchronit%C3%A4t" title="Synchronität">asynchronen</a> <a href="Daten%C3%BCbertragung" title="Datenübertragung">Datenübertragung</a> zwischen einem <a href="Webbrowser" title="Webbrowser">Browser</a> und dem <a href="Server" title="Server">Server</a>. Dieses ermöglicht es, <a href="Hypertext_Transfer_Protocol" title="Hypertext Transfer Protocol">HTTP</a>-Anfragen durchzuführen, während eine <a href="HTML-Seite" class="mw-redirect" title="HTML-Seite">HTML-Seite</a> angezeigt wird, und die Seite zu verändern, ohne sie komplett neu zu laden.
</p>
<div class="mw-heading mw-heading2"><h2 id="Der_Aufbau_einer_Ajax-Anwendung">Der Aufbau einer Ajax-Anwendung</h2></div>
<p>Eine Ajax-Anwendung basiert auf folgenden Web-Techniken:
</p>
<ul><li><a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a> (oder <a href="Extensible_Hypertext_Markup_Language" title="Extensible Hypertext Markup Language">XHTML</a>)</li>
<li><i><a href="Document_Object_Model" title="Document Object Model">Document Object Model</a></i> (DOM) zur Repräsentation der Daten oder Inhalte</li>
<li><i><a href="JavaScript" title="JavaScript">JavaScript</a></i> zur Manipulation des <i>Document Object Models</i> und zur dynamischen Darstellung der Inhalte. JavaScript dient auch als Schnittstelle zwischen einzelnen Komponenten.</li>
<li>Das <i><a href="XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></i>-Objekt, Bestandteil vieler Browser, um Daten auf asynchroner Basis mit dem Webserver austauschen zu können</li>
<li>Eine andere Transportmethode ist <i>On-Demand JavaScript</i>,<sup id="cite_ref-AP_1-0" class="reference"><a href="#cite_note-AP-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> bei der eine JavaScript-Datei per DOM-Manipulation angefordert wird.</li></ul>
<p>Für den Aufruf von Ressourcen, Funktionen bzw. Methoden (<a href="Programmierschnittstelle" title="Programmierschnittstelle">API</a>) gibt es die Ansätze:
</p>
<ul><li><a href="Representational_State_Transfer" title="Representational State Transfer">REST</a> – Aufruf mittels klassischer <a href="Hypertext_Transfer_Protocol" title="Hypertext Transfer Protocol">HTTP</a>-Techniken, zum Beispiel <code>GET http://localhost/person/4</code></li>
<li><a href="SOAP" title="SOAP">SOAP</a> – Übertragung von Methodenname und Parametern als XML-Dokument</li></ul>
<p>Bei der asynchronen Übertragung der Daten haben sich verschiedene Verfahren etabliert:
</p>
<ul><li><a href="Representational_State_Transfer" title="Representational State Transfer">REST</a>-ähnliche Verfahren, um Nutzdaten in Textform zu übertragen</li>
<li><a href="JavaScript_Object_Notation" class="mw-redirect" title="JavaScript Object Notation">JSON</a>, ein auf <i>JavaScript</i> zugeschnittenes, textbasiertes Format für Daten und Objekte</li>
<li>Diverse <a href="Propriet%C3%A4r" title="Proprietär">proprietäre</a> <a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a>-Formate</li>
<li><a href="SOAP" title="SOAP">SOAP</a>, ein Protokoll für <i><a href="Webservice" title="Webservice">Webservices</a></i>, das meist XML als <a href="Austauschformat" title="Austauschformat">Austauschformat</a> verwendet</li></ul>
<p>Im Zusammenhang mit Ajax-Anwendungen werden auch andere Webtechnologien eingesetzt, die ursächlich aber keinen Zusammenhang mit Ajax haben:
</p>
<ul><li><a href="Cascading_Style_Sheets" title="Cascading Style Sheets">CSS</a> zur Formatierung einer Webseite</li>
<li><a href="XSL_Transformation" title="XSL Transformation">XSLT</a> zur Datentransformation</li></ul>
<div class="mw-heading mw-heading2"><h2 id="Geschichte">Geschichte</h2></div>
<div class="mw-heading mw-heading3"><h3 id="Ursprünge"><span id="Urspr.C3.BCnge"></span>Ursprünge</h3></div>
<p>Von wem die Begriffsschöpfung <i>Ajax</i> ursprünglich stammt, ist nicht mehr eindeutig nachvollziehbar. Sicher ist jedoch, dass den Begriff Jesse James Garrett (Mitarbeiter der Agentur Adaptive Path) in seinem Aufsatz <i>Ajax: A New Approach to Web Applications</i><sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> vom 18. Februar 2005 maßgeblich geprägt hat. Grundsätzlich waren die technologischen Grundlagen und die Vorgehensweise aber bereits bekannt und wurden generell mit dem Begriff <i><a href="XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></i> beschrieben. Wenn man so will, hat Garrett also die Marke Ajax erschaffen, um so diverse <a href="Software" title="Software">Software</a>-Technologien unter einem Begriff zusammenzufassen.
</p><p>Die Idee und die damit verbundenen Technologien, die dem Ajax-Konzept zugrunde liegen, gibt es in vergleichbarer Form schon seit etwa 1998. Die erste Komponente, die es ermöglichte, clientseitig eine HTTP-Anforderung auszulösen, basierte auf einer von <a href="Microsoft" title="Microsoft">Microsoft</a> entwickelten Remote-Scripting-Komponente.<sup id="cite_ref-RS_3-0" class="reference"><a href="#cite_note-RS-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> Anfänglich als <a href="Java-Applet" title="Java-Applet">Java-Applet</a> umgesetzt, wurde sie später durch ein Inline-Frame-Element ersetzt. Später wurde diese Idee durch das <a href="Outlook_on_the_web" title="Outlook on the web">Outlook-Web-Access</a>-Team verfeinert. Diese Komponente ist Teil des <a href="Microsoft_Exchange_Server" title="Microsoft Exchange Server">Microsoft Exchange Servers</a> und wurde auch bald, in Form einer XML-Unterstützung, als Bestandteil des <i><a href="Internet_Explorer" title="Internet Explorer">Internet Explorers</a></i> 4.0 ausgeliefert.<sup id="cite_ref-MSS_4-0" class="reference"><a href="#cite_note-MSS-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> Manche Beobachter stufen <i>Outlook Web Access</i> als ersten erfolgreichen Vertreter des Ajax-Konzepts ein. Dennoch basierten diese sehr frühen Umsetzungen des Konzeptes teilweise noch nicht auf dem <i>XMLHttpRequest</i>-Objekt.
</p>
<div class="mw-heading mw-heading3"><h3 id="Erste_Ajax-Anwendungen">Erste Ajax-Anwendungen</h3></div>
<p>Später folgten Anwendungen wie Oddposts <a href="Webmail" title="Webmail">Webmail</a>-Dienst (heute <a href="Yahoo_Mail" title="Yahoo Mail">Yahoo Mail</a>). Im Jahr 2005 war der Begriff Ajax zunehmend durch einige wegweisende Ereignisse in den Medien präsent. Zum einen benutzte Google das asynchrone Kommunikations-Paradigma in einigen bekannten interaktiven Anwendungen wie beispielsweise <a href="Google_Groups" title="Google Groups">Google Groups</a>, <a href="Google_Maps" title="Google Maps">Google Maps</a>, <a href="Google_Suggest" title="Google Suggest">Google Suggest</a>, <a href="Gmail" title="Gmail">Gmail</a> und Google Finance. Der von Garrett verfasste Artikel hat im Ajax-Umfeld inzwischen eine gewisse Bekanntheit erlangt. Letztlich hat sich die Ajax-Unterstützung der <a href="Gecko_(Software)" title="Gecko (Software)">Gecko-Engine</a> in einem Maß entwickelt, welche es ermöglicht, die Ajax-Technologie in vielfältiger Weise einzusetzen.
</p>
<div class="mw-heading mw-heading3"><h3 id="Standardisierung_der_Ajax-Technologien">Standardisierung der Ajax-Technologien</h3></div>
<p>Neueste Standardisierungsunterfangen des XMLHttpRequest-Objekts seitens des <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">W3Cs</a> und die Gründung der <a href="OpenAjax_Alliance" title="OpenAjax Alliance">OpenAjax Alliance</a><sup id="cite_ref-OAI_5-0" class="reference"><a href="#cite_note-OAI-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> lassen erkennen, dass die Industrie zukünftig die Ajax-Technologie in ihre Produkte integrieren und somit auf breiter Basis unterstützen wird.
</p><p>Im Bereich der Standardisierung des Protokolls zwischen Webbrowser und Webserver kann der Kommunikationsstandard <a href="SOAP" title="SOAP">SOAP</a> für Ajax-Anwendungen genutzt werden,<sup id="cite_ref-AE_6-0" class="reference"><a href="#cite_note-AE-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> um so auf einem Server bereits vorhandene Anwendungen, die auf <a href="Webservice" title="Webservice">Webservices</a> basieren, wiederzuverwenden.
</p>
<div class="mw-heading mw-heading2"><h2 id="Vergleich_mit_herkömmlichen_Webanwendungen"><span id="Vergleich_mit_herk.C3.B6mmlichen_Webanwendungen"></span>Vergleich mit herkömmlichen Webanwendungen</h2></div>
<p>Ajax-Anwendungen erwecken den Eindruck, dass sie gänzlich auf dem <a href="Computer" title="Computer">Computer</a> des Anwenders ausgeführt werden. Der Prozessfluss einer traditionellen Webanwendung wird hingegen durch die zustandslose Natur einer HTTP-Anfrage bestimmt. Das damit unmittelbar verbundene <a href="Client-Server-Modell" title="Client-Server-Modell">Request</a>-Response-<a href="Paradigma" title="Paradigma">Paradigma</a> führt dazu, dass bei jeder Benutzeraktion eine zugehörige Anfrage (englisch <i>Request</i>) an den Server gerichtet wird. Verzögert sich die erforderliche Antwort (englisch <i>Response</i>) des Servers oder bleibt diese gar aus, so entstehen unweigerlich längere Wartezeiten oder im schlechtesten Fall <i>Brüche</i> im Ablauf der Anwendung. Das geschilderte Szenario macht für den Benutzer einer traditionellen Webanwendung deutlich, dass sie auf mehrere <a href="Schichtenarchitektur" title="Schichtenarchitektur">Bereiche</a> verteilt wurde – ein Umstand, der mit der Ajax-Programmiertechnik <a href="Transparenz_(Computersystem)" title="Transparenz (Computersystem)">transparenter</a> und somit auch fehlertoleranter gestaltet werden soll.
</p><p>Garrett beschreibt zur Abwicklung der Ajax-Anfragen eine „Ajax-Engine“, eine in JavaScript geschriebene Komponente, die die clientseitige Arbeit übernimmt:
</p>
<div class="Vorlage_Zitat" style="margin:1em 40px;">
<div style="margin:1em 0;"><blockquote style="margin:0;">
<p>„Jede Benutzeraktion, die für gewöhnlich eine HTTP-Anfrage erzeugen würde, erzeugt nun einen JavaScript-Aufruf, der an die Ajax-Engine delegiert wird […] Jede Antwort auf eine Aktion des Nutzers, die keine Verbindung zum Server erfordert, – wie beispielsweise das Validieren von Daten, das Verändern von Daten, welche sich im Speicher befinden, und sogar das Navigieren zwischen einzelnen Elementen der Webseite – all dies kann von der Ajax-Engine bewältigt werden. Benötigt die Ajax-Engine Daten vom Server, um eine bestimmte Aktion erfolgreich durchführen zu können – es kann sich hierbei beispielsweise um das Übertragen von Daten, die verarbeitet werden müssen, um das Nachladen einzelner Bausteine der Benutzeroberfläche oder um das Laden neuer Daten handeln –, führt diese eine asynchrone Anfrage, für gewöhnlich in Form eines XML-Dokuments, an den Server durch. Dabei wurde jedoch die Interaktion des Benutzers mit der Anwendung, wie dies bei gewöhnlichen Webanwendungen der Fall ist, nicht unterbrochen […].“
</p>
</blockquote>
</div><div class="cite" style="margin:-1em 0 1em 1em;">– <style data-mw-deduplicate="TemplateStyles:r261921330">
/* start https://de.wikipedia.org/ */
.mw-parser-output .Person{font-variant:small-caps}
/* end https://de.wikipedia.org/ */
</style><span class="Person h-card">Garrett</span></div></div>
<p>Traditionell übermitteln Webanwendungen <a href="Webformular" title="Webformular">Formulare</a>, die zuvor vom Benutzer ausgefüllt wurden, an einen <a href="Webserver" title="Webserver">Webserver</a>. Der Webserver antwortet, indem er dem Browser des Nutzers eine entsprechend den zuvor übermittelten Formulardaten neu generierte <a href="Webseite" title="Webseite">Webseite</a> schickt. Weil der Webserver bei jeder Anfrage seitens des Nutzers eine neue Webseite erzeugen und übermitteln muss, erscheint die Anwendung dem Benutzer insgesamt als träge und wenig intuitiv, vergleicht man diese mit einer gewöhnlichen Desktop-Anwendung.
</p><p>Ajax-Anwendungen hingegen sind in der Lage, Anfragen an den Server zu schicken, bei denen nur die Daten angefordert werden, die tatsächlich benötigt werden. Dies geschieht über den Aufruf eines Webservices in einer der oben beschriebenen Varianten (<a href="Representational_State_Transfer" title="Representational State Transfer">REST</a>, <a href="SOAP" title="SOAP">SOAP</a>). Der Aufruf erfolgt als <a href="Asynchrone_Kommunikation" title="Asynchrone Kommunikation">asynchrone Kommunikation</a>, d. h. während die Daten vom Server geladen werden, kann der User weiter mit der Oberfläche interagieren. Sind die Daten fertig geladen, dann wird eine zuvor benannte JavaScript-Funktion aufgerufen, die die Daten in die Webseite einbinden kann.
</p><p>Im Ergebnis erhält man so eine Benutzeroberfläche, die sehr viel zügiger auf Benutzereingaben reagiert: teilweise weil wesentlich weniger Daten zwischen Webbrowser und Webserver ausgetauscht werden müssen, teilweise weil die Daten asynchron geladen werden. Zudem wird die Webserver-Last reduziert, da schon viele Verarbeitungsschritte clientseitig getätigt werden können.
</p><p>Man stelle sich eine Webanwendung zur Verwaltung von Fotografien vor. Möchte der Benutzer einem Foto eine Beschreibung oder einen Titel hinzufügen, so muss mit einem traditionellen Programmieransatz die gesamte Seite einschließlich der verkleinerten Foto-Ansichten neu übertragen werden. Mit der Ajax-Technik wird nur der veränderte Bereich der Webseite erneuert. Das Beispiel veranschaulicht, wie es innerhalb der <a href="Flickr" title="Flickr">Flickr</a>-Anwendung möglich ist, Titel einzelner Bilder zu verändern.
</p>
<div class="mw-heading mw-heading2"><h2 id="Beispiel">Beispiel</h2></div>
<p>Im Wikibook „Websiteentwicklung“ (siehe <a href="#Weblinks">Weblinks</a>) findet sich ein einfaches Beispiel-Programm. Dabei wird die JavaScript-Library <a href="Prototype_(Klassenbibliothek)" title="Prototype (Klassenbibliothek)">prototype</a> als Ajax-Engine verwendet, welche die Details der asynchronen Kommunikation mit dem Webserver abhandelt. Auf der Serverseite wird ein PHP-Skript verwendet, das kein XML, sondern ein HTML-Fragment liefert.
</p><p>Der Ajax-Request wird folgendermaßen gesendet:
</p>
<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="nx">myAjax</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Ajax</span><span class="p">.</span><span class="nx">Request</span><span class="p">(</span>
<span class="w"> </span><span class="s2">"datum.php"</span><span class="p">,</span>
<span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">method</span><span class="o">:</span><span class="w"> </span><span class="s1">'get'</span><span class="p">,</span><span class="w"> </span><span class="nx">onComplete</span><span class="o">:</span><span class="w"> </span><span class="nx">zeige_datum</span><span class="w"> </span><span class="p">}</span>
<span class="p">);</span>
</pre></div>
<p>Das PHP-Skript liefert ein Stück unformatierten Text, den man als HTML-Fragment auffassen kann:
</p>
<div class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><?php</span>
<span class="k">echo</span> <span class="s2">"Jetzt ist es "</span> <span class="o">.</span> <span class="nb">date</span><span class="p">(</span><span class="s2">"r"</span><span class="p">);</span>
<span class="cp">?></span>
</pre></div>
<p>Sobald die Daten fertig zum Browser übertragen wurden, wird die Funktion <b>zeige_datum</b> aufgerufen, die dann die Daten weiter verarbeiten und in die Webseite einbinden kann. Dazu werden in diesem Beispiel nur herkömmliche JavaScript-Methoden und Eigenschaften verwendet.
</p>
<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">function</span><span class="w"> </span><span class="nx">zeige_datum</span><span class="p">(</span><span class="w"> </span><span class="nx">originalRequest</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'output'</span><span class="p">).</span><span class="nx">innerHTML</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">originalRequest</span><span class="p">.</span><span class="nx">responseText</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
<div class="mw-heading mw-heading2"><h2 id="Die_Ajax-Plattform">Die Ajax-Plattform</h2></div>
<p>Da Ajax-Anwendungen dem <a href="Client-Server-Modell" title="Client-Server-Modell">Client-Server-Modell</a> entsprechen, ist sowohl innerhalb des Webbrowsers als auch auf dem entsprechenden Server eine Komponente notwendig, die eine Ajax-basierte Kommunikation ermöglicht.
</p>
<div class="mw-heading mw-heading3"><h3 id="Client-Plattform">Client-Plattform</h3></div>
<p>Die Umsetzung innerhalb des Webbrowsers erfolgt in den meisten Fällen mit der Hilfe einer umfangreichen Funktionalität auf der Basis von <a href="JavaScript" title="JavaScript">JavaScript</a> und dem <a href="XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>-Objekt. Dabei lassen sich zwei Kategorien von Plattformen unterscheiden:
</p><p>Direkte Ajax-Implementierungen: Diese stellen auf dem Client eine API zur direkten Kommunikation von Daten zur Verfügung. Dazu ist auf dem Server neben der initial angezeigten Seite ein weiterer Einstiegspunkt zur Übermittlung der Daten zu realisieren.
</p><p>Indirekte Ajax-Implementierungen: Dabei werden neue HTML-Fragmente vom Server an den Client gesendet, um die vorhandene Seite zu ergänzen oder Teile davon zu ersetzen. Meist wird dazu auf dem Server die komplette anzuzeigende Seite neu aufgebaut, aber nur die relevanten Unterschiede zum Client übertragen.
</p><p>Beide Verfahren haben Vor- und Nachteile. Während die direkte Verwendung oft serverseitige Ressourcen schont, vereinfacht die indirekte Variante die Implementierung.
</p>
<div class="mw-heading mw-heading3"><h3 id="Server-Plattform">Server-Plattform</h3></div>
<p>Die eigentliche Programmlogik oder der <a href="Arbeitsablauf" title="Arbeitsablauf">Prozessfluss</a> der Anwendung ist auf einem Server hinterlegt. Dies geschieht beispielsweise in Form von <a href="Jakarta_Enterprise_Beans" title="Jakarta Enterprise Beans">EJBs</a>, <a href=".NET_(Plattform)" title=".NET (Plattform)">.NET</a>-Komponenten oder aber in Form von Skript-Komponenten, wie sie beispielsweise Bestandteil der Skriptsprache <a href="Ruby_(Programmiersprache)" title="Ruby (Programmiersprache)">Ruby</a> sind. Das Ajax-Konzept selbst erfordert keine spezifische Technik, mittels derer die serverseitige Programmlogik umgesetzt werden muss. Sowohl der Server als auch die Anwendungslogik werden im Ajax-Kontext als <i>Server-Plattform</i> bezeichnet.
</p><p>Eine wesentliche Aufgabe des Servers bei Ajax-Applikationen ist die Bereitstellung der im Browser benötigten Komponenten.
Da aufgrund der Sicherheitseinstellungen der Browser ein <a href="Cross-Site-Scripting" title="Cross-Site-Scripting">Cross-Site-Scripting</a> nicht erlaubt ist (<a href="Same-Origin-Policy" title="Same-Origin-Policy">Same-Origin-Policy</a>), muss der Webserver auch Daten von anderen Servern für den Client zur Verfügung stellen und damit die Funktion eines <a href="Proxy_(Rechnernetz)" title="Proxy (Rechnernetz)">Proxy</a>-Rechners übernehmen.
</p>
<div class="mw-heading mw-heading2"><h2 id="Vor-/Nachteile_und_Kritik"><span id="Vor-.2FNachteile_und_Kritik"></span>Vor-/Nachteile und Kritik</h2></div>
<div class="mw-heading mw-heading3"><h3 id="Kein_Neuladen_aufgebauter_Seiten">Kein Neuladen aufgebauter Seiten</h3></div>
<p>Der größte Vorteil der Ajax-Technologie ist die Tatsache, dass Daten verändert werden können, ohne dass die komplette Webseite vom Webbrowser neu geladen werden muss. Dies erlaubt es Webanwendungen, auf Benutzereingaben schneller zu reagieren. Zudem wird vermieden, dass statische Daten, die sich unter Umständen nicht geändert haben, fortwährend über das Internet übertragen werden müssen.
</p>
<div class="mw-heading mw-heading3"><h3 id="Kein_Browser-Plug-in_wird_benötigt"><span id="Kein_Browser-Plug-in_wird_ben.C3.B6tigt"></span>Kein Browser-Plug-in wird benötigt</h3></div>
<p>Da die Ajax-Technologien frei zugänglich sind, werden sie unabhängig vom <a href="Betriebssystem" title="Betriebssystem">Betriebssystem</a> von den Webbrowsern unterstützt, die auch JavaScript unterstützen. Ein Browser-<a href="Plug-in" title="Plug-in">Plug-in</a> wird nicht benötigt. Dies setzt voraus, dass die JavaScript-Unterstützung nicht deaktiviert wurde – genau das stellt den größten Kritikpunkt und die größten Probleme beim Einsatz dar. Vergleichbare Techniken, wie etwa <a href="Adobe_Inc." title="Adobe Inc.">Adobes</a> <a href="Shockwave" title="Shockwave">Shockwave</a> oder <a href="Adobe_Flash" title="Adobe Flash">Flash</a>, sind jedoch immer noch mit dem Nachteil behaftet, dass sie <a href="Propriet%C3%A4r" title="Proprietär">proprietär</a> sind, ein Browser-Plug-in benötigen und nur für bestimmte <a href="Plattform_(Computer)" title="Plattform (Computer)">Plattformen</a> verfügbar sind.
</p>
<div class="mw-heading mw-heading3"><h3 id="Umfangreiche_Tests_erforderlich">Umfangreiche Tests erforderlich</h3></div>
<p>Wie es auch bei <a href="Dynamisches_HTML" title="Dynamisches HTML">dynamischen HTML</a>-Anwendungen zur Praxis geworden ist, muss auch eine Ajax-basierte Anwendung rigoros getestet werden, um so die <i>Eigenarten</i> der diversen Webbrowser entsprechend behandeln zu können. Im Laufe der Zeit hat sich die Ajax-Technologie weiterentwickelt, was dazu führte, dass für diese nun diverse <a href="Programmbibliothek" title="Programmbibliothek">Programmbibliotheken</a> zur Verfügung stehen. Diese können zu einer weitestgehend fehlerfreien und einfacheren Anwendungsprogrammierung beitragen. Bekannte JavaScript-Bibliotheken sind <a href="Dojo_Toolkit" title="Dojo Toolkit">Dojo Toolkit</a>, <a href="JQuery" title="JQuery">jQuery</a>, <a href="Prototype_(Klassenbibliothek)" title="Prototype (Klassenbibliothek)">Prototype</a>, <a href="Xajax" title="Xajax">Xajax</a> und <a href="Qooxdoo" title="Qooxdoo">Qooxdoo</a> (speziell für Anwendungen, die Desktops ähneln sollen).
</p>
<div class="mw-heading mw-heading3"><h3 id="Serverseitige_Browsererkennung">Serverseitige Browsererkennung</h3></div>
<p>Es wurden ebenfalls Techniken entwickelt, wie beispielsweise die von Sun entwickelte <a href="Jakarta_Faces" title="Jakarta Faces">JSF</a>-Technologie, <a href="Apache_Wicket" title="Apache Wicket">Apache Wicket</a> oder die von Microsoft entwickelte Webforms-Technologie, die es ermöglichen, webbasierte Anwendungen zu entwerfen, die einer Desktop-Anwendung nahekommen. Zudem bieten diese die Möglichkeit, auch Benutzer, die einen Webbrowser ohne JavaScript-Unterstützung einsetzen, in geeigneter Weise zu bedienen. Der Browser-Typ des jeweiligen Benutzers wird hierbei serverseitig ermittelt, so dass es möglich ist, diesem nur HTML-Seiten zu schicken, die auch von dessen Webbrowser dargestellt werden können.
</p>
<div class="mw-heading mw-heading3"><h3 id="Verwendung_der_„Zurück“-Schaltfläche"><span id="Verwendung_der_.E2.80.9EZur.C3.BCck.E2.80.9C-Schaltfl.C3.A4che"></span>Verwendung der „Zurück“-Schaltfläche</h3></div>
<p>Einer der am häufigsten beklagten Nachteile der Ajax-Technologie ist die Tatsache, dass es schwer möglich ist, die Funktionalität der „Zurück“-<a href="Schaltfl%C3%A4che" title="Schaltfläche">Schaltfläche</a> des Browsers zu gewährleisten.<sup id="cite_ref-JN_7-0" class="reference"><a href="#cite_note-JN-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> Es besteht die Gefahr, dass das Klicken der „Zurück“-Schaltfläche nicht den vorherigen Zustand der Anwendung wiederherstellt, da Browser für gewöhnlich nur statische Seiten in ihrer Historie abspeichern. Das Unterscheiden zwischen einer statischen Seite, die gänzlich in den <a href="Cache" title="Cache">Cache</a> des Browsers geladen wurde, und einer Seite, die auf dynamische Weise verändert wurde, mag knifflig sein. Grundsätzlich erwartet ein Benutzer, dass ein Klicken der „Zurück“-Schaltfläche die zuletzt getätigte Aktion revidiert. Auch wird oftmals durch das Klicken der „Zurück“-Schaltfläche versucht, eine Seite im Navigationspfad zurückzublättern. Aufgrund der Dynamik, mit welcher viele Ajax-Anwendungen behaftet sind, ist dies nicht immer möglich, da die einzelnen Navigationsschritte des Nutzers technisch nur sehr schwer reproduzierbar sind. <a href="Softwareentwickler" title="Softwareentwickler">Softwareentwickler</a> müssen eine Änderung des Zustandes dem Browser explizit mitteilen. Moderne Browser bieten dafür die History-API an. Eine weit verbreitete Variante ist auch, die URL mit einem Hashtag und einem Client-Pfad zu ergänzen, der den aktuellen Navigationszustand einer Web-Applikation repräsentiert. Insbesondere wird hier der sogenannte <i><a href="Shebang" title="Shebang">Hash-Bang</a></i> (<code>#!</code>)<sup id="cite_ref-HashUri_8-0" class="reference"><a href="#cite_note-HashUri-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> diskutiert, um URLs zu diesem Zweck zu differenzieren.
</p>
<div class="mw-heading mw-heading3"><h3 id="Polling-Problem">Polling-Problem</h3></div>
<p>Da Webserver vor Einführung von Standards wie <a href="WebSocket" title="WebSocket">Websockets</a> nicht in der Lage waren, asynchrone Events an einen Ajax-Client durchzuleiten, wenn sie von diesem nicht angefordert wurden, musste der Ajax-Client seinerseits permanent beim Webserver nachfragen (das eigentliche <a href="Sendeaufruf" title="Sendeaufruf">Polling</a>), ob ein neues Event erzeugt wurde bzw. eine Änderung im Anwendungszustand stattgefunden hat. Dies erzeugt eine völlig andere Auslastung auf einem Webserver, verglichen mit der Last, die von herkömmlichen Anwendungen erzeugt wird.
</p><p>Um ein andauerndes Polling zu vermeiden, wurde die Technik entwickelt, Poll-Antworten solange zurückzuhalten, bis ein tatsächliches Ereignis oder ein <a href="Timeout_(Netzwerktechnik)" title="Timeout (Netzwerktechnik)">Timeout</a> eintritt. Folglich ist mit einer Ajax-Anwendung im Idealfall serverseitig eine Anfrage verknüpft, die letztlich dazu benutzt werden kann, dem Anwendungs-Client beim Eintreten eines entsprechenden Events eine Antwort zu schicken.
</p><p>Diese Technik wirft allerdings neue Probleme auf. Bisher war es üblich, pro Anfrage an den Server einen <a href="Thread_(Informatik)" title="Thread (Informatik)">Thread</a> zu erzeugen, dessen Ressource sofort nach dem Abarbeiten der Anfrage wieder freigegeben werden konnten. Bei der beschriebenen Polling-Technik ist diese Freigabe der Ressourcen jedoch nicht möglich. Es bleiben also weiterhin Ressourcen, wie beispielsweise <a href="Datenspeicher" title="Datenspeicher">Speicher</a>, belegt. Dieses Problem stellt neue Anforderungen an die <a href="Skalierbarkeit" title="Skalierbarkeit">Skalierbarkeit</a> einer Ajax-Anwendung. Eine mögliche Lösung dieses Problems ist die Verwendung eines <a href="Anwendungsserver" title="Anwendungsserver">Anwendungsservers</a>, der das Prinzip der <a href="Continuation" title="Continuation">Continuation</a> (deutsch „Fortsetzung“) unterstützt.
</p>
<div class="mw-heading mw-heading3"><h3 id="Lesezeichen">Lesezeichen</h3></div>
<p>Ein ähnlich gelagertes Problem ist die Tatsache, dass es bei Webseiten, die dynamisch aktualisiert werden, beinahe unmöglich ist, ein <a href="Lesezeichen_(World_Wide_Web)" title="Lesezeichen (World Wide Web)">Lesezeichen</a> auf einen ganz bestimmten Zustand einer Webanwendung zu setzen. Auch für dieses Problem wurden zwischenzeitlich Lösungen entwickelt. Meistens wird in diesem Zusammenhang der <a href="Anker_(HTML)" title="Anker (HTML)">Anker</a> in der gegenwärtigen <a href="Uniform_Resource_Locator" title="Uniform Resource Locator">URL</a>-Adresse verwendet, der nach der Raute <i>(#)</i> steht. Auf diese Weise ist es möglich, den Prozessfluss einer Anwendung zu verfolgen. Zudem wird es dem Benutzer so ermöglicht, über den genannten URL-Teil einen bestimmten Anwendungszustand wiederherzustellen. Viele Webbrowser ermöglichen es, den Anker durch JavaScript dynamisch zu aktualisieren. Dies ermöglicht es einer Ajax-Anwendung, den Inhalt der dargestellten Webseite parallel zur Verarbeitung zu aktualisieren. Diese Lösungsansätze beheben auch einige der Probleme, die durch den nicht funktionierenden Zurück-Knopf entstehen.
</p>
<div class="mw-heading mw-heading3"><h3 id="Rückmeldung"><span id="R.C3.BCckmeldung"></span>Rückmeldung</h3></div>
<p>Die <a href="Verz%C3%B6gerung_(Telekommunikation)" title="Verzögerung (Telekommunikation)">Latenzzeit</a>, also das zeitliche Intervall zwischen einer HTTP-Anfrage des Browsers und der zugehörigen Server-Antwort, muss bei der Entwicklung einer Ajax-Anwendung berücksichtigt werden. Ohne eine klar ersichtliche <a href="R%C3%BCckkopplung" title="Rückkopplung">Rückmeldung</a> für den Benutzer,<sup id="cite_ref-XML_9-0" class="reference"><a href="#cite_note-XML-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup> vorausschauendes Laden einzelner Anwendungsdaten<sup id="cite_ref-JB_10-0" class="reference"><a href="#cite_note-JB-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup> und einen korrekten Umgang mit dem <code>XMLHttpRequest</code>-Objekt<sup id="cite_ref-AB_11-0" class="reference"><a href="#cite_note-AB-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup> kann sich einem Benutzer der Eindruck aufdrängen, dass die gesamte Anwendung nur <i>zähflüssig</i> auf dessen Aktionen reagiert. Für gewöhnlich ist dies ein Umstand, der sich dem Benutzer nur schwer erschließt.<sup id="cite_ref-MB_12-0" class="reference"><a href="#cite_note-MB-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> Aus diesem Grund ist es wichtig, sogenannte visuelle Feedbacks wie beispielsweise das Symbol einer Sanduhr zu verwenden, um den Benutzer darauf aufmerksam zu machen, dass momentan gewisse Hintergrundaktivitäten stattfinden oder Daten, etwa Inhalte, geladen werden.
</p>
<div class="mw-heading mw-heading3"><h3 id="Differenzierung_zwischen_Konzept_und_Begriff">Differenzierung zwischen Konzept und Begriff</h3></div>
<p>Abgesehen von den technischen Schwierigkeiten, die mit Ajax einhergehen, gab es in der Vergangenheit immer wieder Kritik daran, dass das Unternehmen <i>Adaptive Path,</i> welches den Begriff <i>Ajax</i> ursprünglich geprägt hat, oder andere Unternehmen den Begriff als <a href="Marketing" title="Marketing">Marketing</a>-Vehikel benutzen. In diesem Zusammenhang wird vor allem deshalb Kritik geübt, da die Grundlagen von Ajax vor der Prägung des Begriffs entwickelt wurden. Allerdings hat die Prägung des Begriffs auch dazu beigetragen, die Diskussion rund um den Browser als <a href="Fat_Client" title="Fat Client">Fat Client</a> neu zu beleben.
</p>
<div class="mw-heading mw-heading3"><h3 id="Unterstützung_des_MVC-Architekturmusters"><span id="Unterst.C3.BCtzung_des_MVC-Architekturmusters"></span>Unterstützung des MVC-Architekturmusters</h3></div>
<p>Zwar unterstützt eine Ajax-basierte Umgebung nicht per se das <a href="Model_View_Controller" title="Model View Controller">MVC</a>-<a href="Architekturmuster" title="Architekturmuster">Architekturmuster</a>, jedoch kann dieses sehr einfach umgesetzt werden. Eine Umsetzung kann das gesamte Browser-Fenster als Grundlage für die Präsentationsschicht haben. Auch ermöglicht es Ajax, ein zyklisches bzw. geschachteltes MVC-Modell umzusetzen. In diesem Fall besitzen einzelne Präsentationsschicht-Elemente einer Webseite sowohl einen separaten Controller als auch ein separates Modell. Beide Zusammenhänge sind in den Abbildungen dieses Artikels dargestellt.
</p>
<div class="mw-heading mw-heading3"><h3 id="Barrierefreies_Internet">Barrierefreies Internet</h3></div>
<div class="hauptartikel" role="navigation"><span class="hauptartikel-pfeil" title="siehe" aria-hidden="true" role="presentation">→ </span><i><span class="hauptartikel-text">Hauptartikel</span>: <a href="Barrierefreies_Internet" title="Barrierefreies Internet">Barrierefreies Internet</a></i></div>
<p>Soll die Ajax-Technologie eingesetzt werden, so stellt dies eine Herausforderung dar, wenn die Webanwendung den <a href="Web_Accessibility_Initiative" title="Web Accessibility Initiative">WAI</a>-Regeln folgen soll. Software-Entwickler müssen aus diesem Grund Alternativen anbieten, wenn eine Webseite beispielsweise auch für sehbehinderte Nutzer mit einem <a href="Screenreader" title="Screenreader">Screenreader</a> zugänglich sein soll. Dies ist notwendig, da die Mehrzahl aller Ajax-Anwendungen für herkömmliche grafische Webbrowser entworfen wurden.
</p><p>Momentan kommt hierfür oft der sogenannte Hook-Ansatz ins Gespräch, wobei zunächst eine rein statische Anwendung an den Browser geschickt wird und dann bei aktiviertem Javascript alle AJAX Funktionalitäten eingebettet werden.
</p>
<div class="mw-heading mw-heading3"><h3 id="Suchmaschinen/Deep_Links"><span id="Suchmaschinen.2FDeep_Links"></span>Suchmaschinen/Deep Links</h3></div>
<div class="sieheauch" role="navigation" style="font-style:italic;"><span class="sieheauch-text">Siehe auch</span>: <a href="Surface_Links_und_Deep_Links" title="Surface Links und Deep Links">Surface Links und Deep Links</a></div>
<p>Es gibt verschiedene Möglichkeiten, eine Ajax-Anwendung einer <a href="Suchmaschine" title="Suchmaschine">Suchmaschine</a> zugänglich zu machen. Die einzelnen Ansätze variieren im Grad der Indizierung, der erreicht werden kann, und der Art, wie dies erreicht wird. Für einige Webseiten, wie beispielsweise die eines Studiengangs einer Universität, ist es notwendig, dass jeder einzelne Bereich durch eine Suchmaschine erfasst werden kann. Eine Seite jedoch, die einen Webmail-Service zur Verfügung stellt, wird dies nicht erforderlich machen. Nachfolgend sind einige Strategien genannt, die es ermöglichen, einen <a href="Website" title="Website">Webauftritt</a> durch eine Suchmaschine indizieren zu lassen:
</p>
<dl><dt>Lightweight Indexing</dt>
<dd>An der eigentlichen Webseite werden keine strukturellen Änderungen vorgenommen. Es werden jedoch bereits existierende <a href="Element_(Auszeichnungssprache)" title="Element (Auszeichnungssprache)">Elemente</a> wie beispielsweise <a href="Meta-Element" title="Meta-Element">Meta-Tags</a> oder Überschriften-Elemente für die Indizierung verwendet.</dd>
<dt>Extra Link Strategy</dt>
<dd>Zusätzliche Links werden auf der Webseite platziert, denen <a href="Webcrawler" title="Webcrawler">Suchroboter</a> folgen können, um so den gesamten Webauftritt indizieren zu können. Die zusätzlichen Links sollten allerdings sichtbar sein, auch wenn sie nur für den Suchroboter einer Suchmaschine gedacht sind. Unsichtbare Links sind ein Spezialgebiet moderner Suchmaschinen und sie werden als Täuschungsmanöver angesehen.</dd>
<dt>Secondary Site Strategy</dt>
<dd>Eine zweite Webseite wird entworfen. Diese ist für eine Suchmaschine voll zugänglich und bildet entweder die Funktionen der Ajax-Seite nach oder verweist vom entsprechenden Suchwort auf deren Funktionen.</dd></dl>
<p>An dieser Stelle sei darauf hingewiesen, dass das Anwenden der <i>Extra Link Strategy</i> und der <i>Secondary Site Strategy</i> von Suchmaschinen möglicherweise als Täuschungsversuch gewertet werden könnte (<a href="Cloaking" title="Cloaking">Cloaking</a>). Die beste Möglichkeit, das zu vermeiden, besteht darin, in der Originalseite ein <code><meta name="robots" content="noindex" /></code> einzubauen.
</p><p>Seit Mai 2014 kann Google Ajax-Webseiten ohne weitere Hilfsmittel indexieren.<sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup> Obengenannte Strategien sind für eine Indexierung durch Google nicht mehr in vollem Umfang nötig. Experimente von Bartosz Goralewicz deuten allerdings darauf hin, dass Webseiten, die JavaScript intensiv nutzen, mehr Ressourcen von Suchmaschinen-Bots (Crawler Budget) erfordern. Im Vergleich zu reinen HTML-Anwendungen werden bei JS-basierten Websites von Suchmaschinen-Bots insgesamt weniger Seiten gecrawlt.<sup id="cite_ref-14" class="reference"><a href="#cite_note-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="Status/Verbreitung"><span id="Status.2FVerbreitung"></span>Status/Verbreitung</h2></div>
<p>Folgende <a href="Webbrowser" title="Webbrowser">Webbrowser</a> sind derzeit in der Lage, Ajax-Anwendungen auszuführen. Genannt wird immer nur die <i>erste</i> Software-Version, die es ermöglichte, Ajax-Anwendungen auszuführen. Alle Folgeversionen implizieren dieselbe Unterstützung.
</p>
<table class="wikitable">
<tbody><tr>
<th>Name
</th>
<th>Erste Version mit Ajax-Unterstützung
</th>
<th>Native Unterstützung
</th>
<th>Unterstützung durch ein <a href="Plug-in" title="Plug-in">Add-on</a>
</th>
<th>Kommentar
</th></tr>
<tr>
<td>Microsoft <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a>
</td>
<td>5.0
</td>
<td>7.0
</td>
<td>ja (<a href="ActiveX" title="ActiveX">ActiveX</a>-Komponente)
</td>
<td>Die Version 4.0 unterstützte erstmals XML, jedoch nicht die für Ajax notwendige XMLHttpRequest-API. Diese API wurde später als ActiveX-Komponente realisiert und ist ab Version 7.0 nativer Bestandteil des IEs. Browser, die auf der Internet-Explorer-Technologie aufbauen, sind ebenfalls Ajax-kompatibel.
</td></tr>
<tr>
<td><a href="Mozilla_Firefox" title="Mozilla Firefox">Mozilla Firefox</a>
</td>
<td>1.0
</td>
<td>ja
</td>
<td>—
</td>
<td>Auch alle anderen auf <a href="Gecko_(Software)" title="Gecko (Software)">Gecko</a> basierenden Browser.
</td></tr>
<tr>
<td><a href="Opera_(Browser)" title="Opera (Browser)">Opera</a>
</td>
<td>8.0
</td>
<td>ja
</td>
<td>—
</td>
<td>—
</td></tr>
<tr>
<td><a href="Safari_(Browser)" title="Safari (Browser)">Safari</a>
</td>
<td>1.2
</td>
<td>ja
</td>
<td>—
</td>
<td>Apples Browser Safari basiert auf <a href="WebKit" title="WebKit">WebKit</a>, einem <a href="KHTML" title="KHTML">KHTML</a>-<a href="Abspaltung_(Softwareentwicklung)" title="Abspaltung (Softwareentwicklung)">Fork</a>.
</td></tr>
<tr>
<td><a href="Shiira" title="Shiira">Shiira</a>
</td>
<td>0.9.1.1
</td>
<td>ja
</td>
<td>—
</td>
<td>Shiira basiert auf <a href="WebKit" title="WebKit">WebKit</a>.
</td></tr>
<tr>
<td><a href="Google_Chrome" title="Google Chrome">Google Chrome</a>
</td>
<td>0.2
</td>
<td>ja
</td>
<td>—
</td>
<td>Google Chrome basiert bis Version 27 auf Apples <a href="WebKit" title="WebKit">WebKit</a>, ab Version 28 kommt die <i>WebKit</i>-<a href="Abspaltung_(Softwareentwicklung)" title="Abspaltung (Softwareentwicklung)">Abspaltung</a> <i><a href="Blink_(Browser-Engine)" title="Blink (Browser-Engine)">Blink</a></i> zum Einsatz.
</td></tr>
<tr>
<td><a href="Netscape_Navigator" title="Netscape Navigator">Netscape</a>
</td>
<td>7.1
</td>
<td>ja
</td>
<td>—
</td>
<td>—
</td></tr>
<tr>
<td><a href="Konqueror" title="Konqueror">Konqueror</a>
</td>
<td>3.2
</td>
<td>ja
</td>
<td>—
</td>
<td>Das HTML-Rendering wird durch <a href="KHTML" title="KHTML">KHTML</a> realisiert.
</td></tr>
<tr>
<td><a href="ICab" title="ICab">iCab</a>
</td>
<td>3.0 Beta
</td>
<td>ja
</td>
<td>—
</td>
<td>Ältere Versionen wie beispielsweise die Version für <a href="Motorola-68000er-Familie" title="Motorola-68000er-Familie">m68k</a>-basierte Computer unterstützen kein Ajax.
</td></tr></tbody></table>
<div class="mw-heading mw-heading2"><h2 id="Anwendungsbeispiele">Anwendungsbeispiele</h2></div>
<p>Die nachfolgenden Weblinks referenzieren typische Vertreter einer Anwendung auf Ajax-Basis. Einige haben durch ihre neuartige, intuitiv zu bedienende Benutzeroberfläche einen gewissen Bekanntheitsgrad erlangt. Die Linkliste selbst kann in diesem Zusammenhang ob der aktuellen Vielfalt an Ajax-Anwendungen nur eine beispielhafte Auswahl darstellen und ist bewusst sehr kurz gehalten.
</p>
<ul><li><a href="Virtueller_Globus" title="Virtueller Globus">Virtuelle Globen</a>/Virtuelle <a href="Karte_(Kartografie)" title="Karte (Kartografie)">Landkarten</a>
<ul><li><a href="Google_Maps" title="Google Maps">Google Maps</a> – interaktive Weltkarte</li>
<li><a href="OpenStreetMap" title="OpenStreetMap">OpenStreetMap</a> – interaktive freie Weltkarte, geografisches Wiki</li></ul></li>
<li><a href="Webanwendung" title="Webanwendung">Webbasierte</a> <a href="Office-Paket" title="Office-Paket">Büroanwendungen</a>
<ul><li><a href="AjaxWrite" title="AjaxWrite">AjaxWrite</a> – <a href="Textverarbeitung" title="Textverarbeitung">Textverarbeitung</a></li>
<li>iRows – <a href="Tabellenkalkulation" title="Tabellenkalkulation">Tabellenkalkulation</a></li></ul></li>
<li>Anwendungen, welche Wikipedia nutzen
<ul><li>Gollum Wikipedia-Browser</li></ul></li>
<li><a href="Social_Software" title="Social Software">Social Software</a>
<ul><li><a href="Flickr" title="Flickr">Flickr</a> – Webanwendung zur Verwaltung von Fotos</li>
<li><a href="Delicious_(Onlinedienst)" title="Delicious (Onlinedienst)">Delicious</a> – Web-basiertes, kommunales Bookmark-System, schlägt „<a href="Tag_(Informatik)" title="Tag (Informatik)">Tags</a>“ und Begriffe vor</li>
<li><a href="Last.fm" title="Last.fm">Last.fm</a> – Internetradio</li>
<li>alle <a href="Poolworks" title="Poolworks">VZ Netzwerke</a> – Soziale Netzwerke</li>
<li><a href="Facebook" title="Facebook">Facebook</a></li></ul></li>
<li>Vermischtes
<ul><li><a href="EyeOS" title="EyeOS">eyeOS</a> – <a href="Web-Desktop" title="Web-Desktop">Web-Desktop</a></li>
<li><a href="Gmail" title="Gmail">Gmail</a> – bietet eine Art <a href="E-Mail-Programm" title="E-Mail-Programm">E-Mail-Programm</a> für den <a href="Webbrowser" title="Webbrowser">Webbrowser</a> an.</li>
<li><a href="Google_Suggest" title="Google Suggest">Google Suggest</a> – zeigt Vorschläge an, die der Benutzer suchen könnte</li>
<li><a href="Meebo" title="Meebo">Meebo</a> – Web-basierter Instant Messenger, unterstützt <a href="AOL" title="AOL">AOL</a>-, <a href="ICQ" title="ICQ">ICQ</a>-, <a href="Yahoo_Messenger" title="Yahoo Messenger">Yahoo-Messenger</a>-, <a href="Windows_Live_Messenger" title="Windows Live Messenger">MSN-Messenger</a>-, <a href="Jabber_Instant_Messenger" title="Jabber Instant Messenger">Jabber</a>- und <a href="Google_Talk" title="Google Talk">Google-Talk</a>-Konten</li>
<li><a href="ET-Chat" title="ET-Chat">ET-Chat</a> – Webchatsystem</li></ul></li>
<li><a href="Customer-Relationship-Management" title="Customer-Relationship-Management">Customer-Relationship-Management</a> (CRM)
<ul><li><a href="24SevenOffice" title="24SevenOffice">24SevenOffice</a></li></ul></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>
<ol class="references">
<li id="cite_note-AP-1"><span class="mw-cite-backlink"><a href="#cite_ref-AP_1-0">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20110422104546/http://ajaxpatterns.org/On-Demand_Javascript"><i>Ajax Patterns – On-Demand Javascript.</i></a> Ajaxpatterns.org, archiviert vom <style data-mw-deduplicate="TemplateStyles:r250917974">
/* start https://de.wikipedia.org/ */
.mw-parser-output .dewiki-iconexternal>a{background-position:center right!important;background-repeat:no-repeat!important}body.skin-minerva .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/OOjs_UI_icon_external-link-ltr-progressive.svg")!important;background-size:10px!important;padding-right:13px!important}body.skin-timeless .mw-parser-output .dewiki-iconexternal>a,body.skin-monobook .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/MediaWiki_external_link_icon.svg")!important;padding-right:13px!important}body.skin-vector .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/Link.ernal-small-ltr-progressive.svg")!important;background-size:0.857em!important;padding-right:1em!important}
/* end https://de.wikipedia.org/ */
</style><span class="dewiki-iconexternal"><a class="external text" href="https://redirecter.toolforge.org/?url=http%3A%2F%2Fajaxpatterns.org%2FOn-Demand_Javascript">Original</a></span> am <span style="white-space:nowrap;">22. April 2011</span><span>;</span><span class="Abrufdatum"> abgerufen am 11. September 2010</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AAjax+%28Programmierung%29&rft.title=Ajax+Patterns+%E2%80%93+On-Demand+Javascript&rft.description=Ajax+Patterns+%E2%80%93+On-Demand+Javascript&rft.identifier=https%3A%2F%2Fweb.archive.org%2Fweb%2F20110422104546%2Fhttp%3A%2F%2Fajaxpatterns.org%2FOn-Demand_Javascript&rft.publisher=Ajaxpatterns.org&rft.date=&rft.source=http://ajaxpatterns.org/On-Demand_Javascript&rft.language=en"> </span></span>
</li>
<li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a></span> <span class="reference-text">Jesse James Garret: <style data-mw-deduplicate="TemplateStyles:r261891140">
/* start https://de.wikipedia.org/ */
.mw-parser-output .webarchiv-memento a{color:inherit}
/* end https://de.wikipedia.org/ */
</style><a rel="nofollow" class="external text" href="https://web.archive.org/web/20080702075113/http://www.adaptivepath.com/ideas/essays/archives/000385.php">Ajax: A New Approach to Web Applications</a> (<span class="webarchiv-memento"><a href="Webarchivierung#Begrifflichkeiten" title="Webarchivierung">Memento</a></span> vom 2. Juli 2008 im <i><a href="Internet_Archive" title="Internet Archive">Internet Archive</a></i>)</span>
</li>
<li id="cite_note-RS-3"><span class="mw-cite-backlink"><a href="#cite_ref-RS_3-0">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="http://msdn.microsoft.com/de-de/library/cc766801.aspx"><i>Remote Scripting.</i></a> Msdn.microsoft.com,<span class="Abrufdatum"> abgerufen am 11. September 2010</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AAjax+%28Programmierung%29&rft.title=Remote+Scripting&rft.description=Remote+Scripting&rft.identifier=&rft.publisher=Msdn.microsoft.com&rft.date=&rft.language=en"> </span></span>
</li>
<li id="cite_note-MSS-4"><span class="mw-cite-backlink"><a href="#cite_ref-MSS_4-0">↑</a></span> <span class="reference-text">Microsoft: <a rel="nofollow" class="external text" href="http://support.microsoft.com/default.aspx#XSLTH3131121122120121120120">XML versions that are included with Microsoft Internet Explorer</a> Knowledge Base Q269238 – Version list for the Microsoft XML parser</span>
</li>
<li id="cite_note-OAI-5"><span class="mw-cite-backlink"><a href="#cite_ref-OAI_5-0">↑</a></span> <span class="reference-text"><span class="cite">Zimbra.com: <a rel="nofollow" class="external text" href="https://web.archive.org/web/20090803135838/http://www.zimbra.com/community/open_ajax.html"><i>Stellungnahme des Unternehmens Zimbra, Inc. bezüglich der Open Ajax Initiative.</i></a> Zimbra.com, archiviert vom <span class="dewiki-iconexternal"><a class="external text" href="https://redirecter.toolforge.org/?url=http%3A%2F%2Fwww.zimbra.com%2Fcommunity%2Fopen_ajax.html">Original</a></span> am <span style="white-space:nowrap;">3. August 2009</span><span>;</span><span class="Abrufdatum"> abgerufen am 11. September 2010</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AAjax+%28Programmierung%29&rft.title=Stellungnahme+des+Unternehmens+Zimbra%2C+Inc.+bez%C3%BCglich+der+Open+Ajax+Initiative&rft.description=Stellungnahme+des+Unternehmens+Zimbra%2C+Inc.+bez%C3%BCglich+der+Open+Ajax+Initiative&rft.identifier=https%3A%2F%2Fweb.archive.org%2Fweb%2F20090803135838%2Fhttp%3A%2F%2Fwww.zimbra.com%2Fcommunity%2Fopen_ajax.html&rft.creator=Zimbra.com&rft.publisher=Zimbra.com&rft.date=&rft.source=http://www.zimbra.com/community/open_ajax.html&rft.language=en"> </span></span>
</li>
<li id="cite_note-AE-6"><span class="mw-cite-backlink"><a href="#cite_ref-AE_6-0">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="http://www.mathertel.de/AJAXEngine/"><i>Browserunabhängige Ajax-Engine auf der Basis der Web-Services-Technologie.</i></a> Mathertel.de, 24. Februar 2007,<span class="Abrufdatum"> abgerufen am 11. September 2010</span>.</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AAjax+%28Programmierung%29&rft.title=Browserunabh%C3%A4ngige+Ajax-Engine+auf+der+Basis+der+Web-Services-Technologie&rft.description=Browserunabh%C3%A4ngige+Ajax-Engine+auf+der+Basis+der+Web-Services-Technologie&rft.identifier=&rft.publisher=Mathertel.de&rft.date=2007-02-24"> </span></span>
</li>
<li id="cite_note-JN-7"><span class="mw-cite-backlink"><a href="#cite_ref-JN_7-0">↑</a></span> <span class="reference-text"><a href="Jakob_Nielsen_(Schriftsteller)" title="Jakob Nielsen (Schriftsteller)">Jakob Nielsen</a>: <a rel="nofollow" class="external text" href="http://www.useit.com/alertbox/990530.html">Top-10 New Mistakes of Web Design</a>, 1999</span>
</li>
<li id="cite_note-HashUri-8"><span class="mw-cite-backlink"><a href="#cite_ref-HashUri_8-0">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://www.w3.org/blog/2011/05/hash-uris/"><i>Hash URIs.</i></a> w3.org, 12. Mai 2011,<span class="Abrufdatum"> abgerufen am 1. März 2017</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AAjax+%28Programmierung%29&rft.title=Hash+URIs&rft.description=Hash+URIs&rft.identifier=&rft.publisher=w3.org&rft.date=2011-05-12&rft.language=en"> </span></span>
</li>
<li id="cite_note-XML-9"><span class="mw-cite-backlink"><a href="#cite_ref-XML_9-0">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="http://www.xml.com/pub/a/2005/08/22/ajax.html"><i>Remote Scripting with AJAX, Part 2.</i></a> Xml.com,<span class="Abrufdatum"> abgerufen am 11. September 2010</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AAjax+%28Programmierung%29&rft.title=Remote+Scripting+with+AJAX%2C+Part+2&rft.description=Remote+Scripting+with+AJAX%2C+Part+2&rft.identifier=&rft.publisher=Xml.com&rft.date=&rft.language=en"> </span></span>
</li>
<li id="cite_note-JB-10"><span class="mw-cite-backlink"><a href="#cite_ref-JB_10-0">↑</a></span> <span class="reference-text">Jonathan Boutelle: <a rel="nofollow" class="external text" href="https://web.archive.org/web/20070929102006/http://www.jonathanboutelle.com/mt/archives/2004/08/latency_must_di.html">Latency Must Die: Reducing Latency by Preloading Data</a> (<span class="webarchiv-memento"><a href="Webarchivierung#Begrifflichkeiten" title="Webarchivierung">Memento</a></span> vom 29. September 2007 im <i><a href="Internet_Archive" title="Internet Archive">Internet Archive</a></i>), 26. August 2004</span>
</li>
<li id="cite_note-AB-11"><span class="mw-cite-backlink"><a href="#cite_ref-AB_11-0">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20051023145137/http://ajaxblog.com/archives/2005/06/01/async-requests-over-an-unreliable-network">Ajax Blog – HTML, Javascript and XML coding techniques for Web 2.0</a> (<span class="webarchiv-memento"><a href="Webarchivierung#Begrifflichkeiten" title="Webarchivierung">Memento</a></span> vom 23. Oktober 2005 im <i><a href="Internet_Archive" title="Internet Archive">Internet Archive</a></i>) Async Requests over an Unreliable Network</span>
</li>
<li id="cite_note-MB-12"><span class="mw-cite-backlink"><a href="#cite_ref-MB_12-0">↑</a></span> <span class="reference-text">Marcus Baker: <a rel="nofollow" class="external text" href="https://web.archive.org/web/20051212131258/http://www.lastcraft.com/blog/index.php?p=19">Listen kids, AJAX is not cool</a> (<span class="webarchiv-memento"><a href="Webarchivierung#Begrifflichkeiten" title="Webarchivierung">Memento</a></span> vom 12. Dezember 2005 im <i><a href="Internet_Archive" title="Internet Archive">Internet Archive</a></i>) (Archivversion), 3. Juni 2005, abgerufen am 7. März 2014.</span>
</li>
<li id="cite_note-13"><span class="mw-cite-backlink"><a href="#cite_ref-13">↑</a></span> <span class="reference-text">Erik Hendriks, Michael Xu, Kazushi Nagayama: <a rel="nofollow" class="external text" href="https://webmasters.googleblog.com/2014/05/understanding-web-pages-better.html"><i>Understanding web pages better</i>.</a> 23. Mai 2014.</span>
</li>
<li id="cite_note-14"><span class="mw-cite-backlink"><a href="#cite_ref-14">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://www.youtube.com/watch?v=dN-3_9E8n3c&t=21m49s"><i>Advanced Technical SEO – Searchmetrics Summit 2017.</i></a> searchmetrics – youtube.com, 29. November 2017,<span class="Abrufdatum"> abgerufen am 19. Dezember 2017</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AAjax+%28Programmierung%29&rft.title=Advanced+Technical+SEO+%E2%80%93+Searchmetrics+Summit+2017&rft.description=Advanced+Technical+SEO+%E2%80%93+Searchmetrics+Summit+2017&rft.identifier=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdN-3_9E8n3c%26t%3D21m49s&rft.publisher=searchmetrics+%E2%80%93+youtube.com&rft.date=2017-11-29&rft.language=en"> </span></span>
</li>
</ol>
<div class="mw-heading mw-heading2"><h2 id="Literatur">Literatur</h2></div>
<ul><li>Jesse James Garrett: <i>Ajax: A New Approach to Web Applications.</i> Adaptive Path LLC, 18. Februar 2005, <a rel="nofollow" class="external text" href="https://web.archive.org/web/20080702075113/http://www.adaptivepath.com/ideas/essays/archives/000385.php">Der Aufsatz, der den Namen geprägt hat.</a> (<span class="webarchiv-memento"><a href="Webarchivierung#Begrifflichkeiten" title="Webarchivierung">Memento</a></span> vom 2. Juli 2008 im <i><a href="Internet_Archive" title="Internet Archive">Internet Archive</a></i>) (englisch)</li>
<li>Christian Wenz: <i>AJAX. schnell + kompakt.</i> entwickler.press, 2006, ISBN 3-935042-92-2.</li>
<li>Olaf Bergmann, Carsten Bormann: <i>AJAX – Frische Ansätze für das Web-Design.</i> 1. Auflage. SPC TEIA Lehrbuch Verlag, 2005, ISBN 3-935539-26-6 (<a rel="nofollow" class="external text" href="http://www.teialehrbuch.de/kurse/ajax/">HTML-Variante des Buchs</a>).</li>
<li>Johannes Gamperl: <i>Ajax.</i> Galileo Computing, 2006, ISBN 3-89842-764-1.</li>
<li>Denny Carl: <i>Praxiswissen Ajax.</i> O’Reilly, 2006, ISBN 3-89721-451-2.</li>
<li>Hannes Pfeiffer: <i>Ajax: Modernes Webscripting.</i> Data Becker, 2006, ISBN 3-8158-2801-5.</li>
<li>Dave Crane, Eric Pascarello, Darren James: <i>Ajax in Action. Das Entwicklerbuch für das Web 2.0.</i> Addison-Wesley, 2006, ISBN 3-8273-2414-9 (<a rel="nofollow" class="external text" href="https://www.manning.com/crane/">einzelne Kapitel als Online-Version</a>, in englischer Sprache).</li>
<li>Kai Jäger: <i>Ajax in der Praxis.</i> Springer, 2007, ISBN 978-3-540-69333-8.</li>
<li>Ryan Asleson, Nathaniel T. Schutta: <i>Foundations of Ajax.</i> Apress, 2005, ISBN 1-59059-582-3.</li>
<li>Nicholas C. Zakas: <i>Professional Ajax.</i> 2. Auflage. Wrox, 2007, ISBN 0-470-10949-1.</li></ul>
<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>
<div class="sisterproject" style="margin:0.1em 0 0 0;"><div class="noviewer" style="display:inline-block; line-height:10px; min-width:1.6em; text-align:center;" aria-hidden="true" role="presentation"><span class="mw-default-size" typeof="mw:File"><span title="Wikibooks"></span></span></div><b><a href="https://de.wikibooks.org/wiki/Websiteentwicklung:_AJAX" class="extiw external" title="b:Websiteentwicklung: AJAX">Wikibooks: Websiteentwicklung: AJAX</a></b> – Lern- und Lehrmaterialien</div>
<ul><li><a rel="nofollow" class="external text" href="https://developer.mozilla.org/de/docs/AJAX">Artikel im Mozilla developer Center zu Ajax.</a></li>
<li><a rel="nofollow" class="external text" href="https://www.xul.fr/en-xml-ajax.html">Ajax Tutorial: Asynchronous Javascript + XML, Creating client-side dynamic Web pages</a> (englisch)</li></ul>
<div class="hintergrundfarbe1 rahmenfarbe1 navigation-not-searchable normdaten-typ-s" style="border-style: solid; border-width: 1px; clear: left; margin-bottom:1em; margin-top:1em; padding: 0.25em; overflow: hidden; word-break: break-word; word-wrap: break-word;" id="normdaten">
<div style="display: table-cell; vertical-align: middle; width: 100%;">
<div>
Normdaten (Sachbegriff): <a href="Gemeinsame_Normdatei" title="Gemeinsame Normdatei">GND</a>: <span class="-print"><a rel="nofollow" class="external text" href="https://d-nb.info/gnd/7515401-8">7515401-8</a></span> </div>
</div></div></div><!--htdig_noindex--><div><div class="zim-footer">
Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-11-01" href="https://de.wikipedia.org/wiki/?title=Ajax_(Programmierung)&oldid=261113088">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
<script src="./_webp_/webpHandler.js"></script>
</body></html>